<template>
  <div>
    <!-- 2. 在调用 具有插槽的组件的时候，在双标签内部插入内容 -->
    <h2>默认插槽</h2>
    <DefaultSlot>
      <p>这是用来放到插槽里面的内容</p>
    </DefaultSlot>
    <hr />
    <h2>具名插槽</h2>
    <NamedSlot>
      <!-- 2. 通过 v-slot 指令指定 是哪个插槽 -- vue 2.6 之后的用法 -->
      <template v-slot:red>
        <p>红宝石</p>
      </template>
      <template v-slot:green>
        <p>绿宝石</p>
      </template>

      <!-- vue 2.6 之前 的用法， 但是现在已经弃用了-->
      <!-- <p slot="red">红宝石</p>
      <p slot="green">绿宝石</p> -->
    </NamedSlot>
    <hr />
    <h2>作用域插槽</h2>
    <ScopedSlot>
      <!-- 这个作用域插槽的用法，也是 vue2.6之后的 -->
      <template v-slot:default="props">
        <p>{{ props.age }}</p>
      </template>

      <!-- 如果是vue2.6之前 -->
      <!-- <template slot="default" slot-scope="props">
        <p>vue2.6之前的做法 {{ props.age }}</p>
      </template> -->
    </ScopedSlot>
  </div>
</template>
<script>
import DefaultSlot from "./DefaultSlot.vue";
import NamedSlot from "./NamedSlot.vue";
import ScopedSlot from "./ScopedSlot.vue";
export default {
  components: { DefaultSlot, NamedSlot, ScopedSlot },
  data() {
    return {
      age: 200,
    };
  },
};
</script>
